{%- import 'apostrophe-ui:components/buttons.html' as buttons with context -%}
{% if data.autocomplete and data.browse %}
  <div class="apos-browse-and-autocomplete">
{% elseif data.browse %}
  <div class="apos-browse">
{% endif %}
{% if data.autocomplete %}
  <input type="text" name="autocomplete" class="apos-field-input apos-field-input-text" placeholder="{{ __ns('apostrophe', 'Search...') }}" data-autocomplete />
{% endif %}
{% if data.browse %}
  {{ buttons.action('Browse', { action: 'browse', icon: 'caret-right' }) }}
{% endif %}
{% if data.autocomplete or data.browse %}
  </div>
{% endif %}
{# Existing selections #}
<div data-choices>
  {# AJAX populates me #}
</div>
{# Initially hidden #}
<div class="apos-chooser-limit-reached">{{ __ns('apostrophe', "Limit Reached") }}</div>
